<template>
	<view class="u-bg-white">
		<zx-nav :title="articleDetail.name || '文章详情'" bg="#fff" fixedTop></zx-nav>
		<view class="title u-border-bottom">
			<view class="name">{{ articleDetail.name }}</view>
			<view class=" flex justify-between align-center">
				<view>浏览量：{{ articleDetail.read || 0 }}</view>
				<view>创建时间：{{ articleDetail.created_at || '' }}</view>
			</view>
		</view>
		<view class="richText">
			<!-- <rich-text :nodes="articleDetail.info"></rich-text> -->
			<rf-parser :html="articleDetail.info" lazy-load></rf-parser>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import rfParser from '@/components/rf-parser';
import sharemixin from '@/common/sharemixin.js';
export default {
	data() {
		return {
			id: null,
			articleDetail: {
				name: '',
				read: '',
				info: ''
			},
			isoneArticle: false, //是否为单个文章
			type: null,
			title: ''
		};
	},
	mixins: [sharemixin],
	components: { rfParser },
	computed: { ...mapState['memberId'] },
	onLoad(options) {
		this.id = options.id;
		this.isoneArticle = options.isoneArticle;
		this.type = options.type;
		if (!this.id) {
			var title = '';
			switch (this.type) {
				case '1':
					title = '交易规则';
					break;
				case '2':
					title = '运输说明';
					break;
				case '3':
					title = '售后规定';
					break;
				case '6':
					title = '等级标准';
					break;
				case '7':
					title = '服务协议';
					break;
				case '8':
					title = '隐私政策';
					break;
			}
			this.title = title;
			uni.setNavigationBarTitle({
				title: title
			});
		}
		if (!!options.recommendId) {
			this.SET_INVITED(options.recommendId);
		}
	},
	onShow() {
		this.getArticleDetail();
	},
	onShareTimeline() {
		let scene = `id=${this.id}`;
		if (this.memberId) {
			scene = scene + '&recommendId=' + this.memberId;
		}
		let shareParams = {
			title: this.share_title,
			imageUrl: this.share_img,
			path: `/pages/article/details`,
			query: scene
		};
		return shareParams;
	},
	onShareAppMessage() {
		let scene = `id=${this.id}`;
		if (this.memberId) {
			scene = scene + '&recommendId=' + this.memberId;
		}
		let shareParams = {
			title: this.share_title,
			imageUrl: this.share_img,
			path: `/pages/article/details?${scene}`
		};
		return shareParams;
	},
	methods: {
		getArticleDetail() {
			if (this.isoneArticle) {
				var param = {
					type: this.type
				};
				this.$getAction(this.$api.getOneArticle + '?type=' + this.type).then(da => {
					if (da.code == 0) {
						this.articleDetail = da.data;
					}
				});
			} else {
				this.$getAction(this.$api.getArticleDetail + this.id).then(da => {
					if (da.code == 0) {
						this.articleDetail = da.data;
						this.title = this.articleDetail.name;
						this.share_title = this.title;
						this.share_img = this.articleDetail.img_url;
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.title {
	color: $u-tips-color;
	margin: 0 28upx;
	padding: 32upx 0 24upx;
	font-size: 24upx;
	line-height: 33upx;
	.name {
		font-size: 32upx;
		line-height: 45upx;
		font-weight: 500;
		margin-bottom: 24upx;
		color: #000;
	}
}
.richText {
	padding: 30upx 30upx;
}
</style>
